<template>
  <div id="mainBox">
      <div class="tableBox ">
        <div ref="customerService"  class="tableSmallBox" 
        @touchstart="touchstartHandle('customerService', $event)"
        @touchmove="touchmoveHandle('customerService', $event)"
        @mousedown="mousedownHandle('customerService', $event)"
>
          <table class="table " border="1" cellspacing="0" :width="styleWidth" :height="styleHeight">
                <tr v-for="item in row" :key="item">{{item}}
                    <td v-for="jtem in col " :key="jtem" >{{jtem}}</td>
                </tr>
          </table>
        </div>
      </div>
      <div class="sliderBox">
          <div class="block">
            <el-slider
            v-model="value"
            show-input
            vertical
            height="200px"
            @input="inputChange"
            :show-tooltip="false"
            :step='3'
            :min='1'>
            </el-slider>
            <div class="bottomBox"></div>
            <div class="topBox"></div>
            <div class="origin" @click="origin">
                <span class="originInner"></span>
            </div>
        </div>
      </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 1,
        oldValue:null,
        row: [1, 2, 3, 4],
        col: [1, 2, 3, 4, 5, 6],
        touch: {
            initialPosition: {},
            movePostion: {},
        },
        element: {
            initialPosition: {},
            movePostion: {},
        },
        pcFlg:true
      }
    },
    mounted() {
        var butBox = document.querySelector(".el-slider__button");
        console.log(butBox,"哈哈");
        butBox.innerHTML = `<i class="el-butMid">+</i>`

        var btnAdd = document.querySelector(".el-input-number__increase");
        var btnCut = document.querySelector(".el-input-number__decrease");

        // pc端的按下事件
        btnAdd.onmousedown =()=>{
            this.oldValue = this.value
        }        
        btnCut.onmousedown =()=>{
            this.oldValue = this.value
        }
        
        // // 移动端 的触摸事件
        // btnAdd.ontouchstart = ()=>{
        //     this.oldValue = this.value
        // }   
        // btnCut.ontouchstart = ()=>{
        //     this.oldValue = this.value
        // }
        var btnMid = document.querySelector(".el-slider__button-wrapper");
        btnMid.onmousedown = ()=> {
            this.oldValue = this.value
            // let that = this            
            // console.log(this.value,"嘿嘿");
            
        }

        // 判断是否是移动端
        let mobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
        console.log(mobile,"是什么");
        // if(mobile === null){
        //     this.pcFlg = true
        // }else{
        //     this.pcFlg = false
        // }
    },
    methods: {
        inputChange(){
            console.log(this.value,this.oldValue);
            var butBox = document.querySelector(".el-slider__button");
            if(this.value > this.oldValue){               
                butBox.innerHTML = `<i class="el-butMid">+</i>`
                this.oldValue = this.value
            }else if(this.value < this.oldValue){                
                butBox.innerHTML = `<i class="el-butMid">-</i>`
                this.oldValue = this.value
            }
        },
        origin(){
            this.value = 0
            var tableSmallBox = document.querySelector(".tableSmallBox")
            tableSmallBox.style.left ='50%';
            tableSmallBox.style.top = '50%';
        },

        // 移动的方法代码
        touchstartHandle(refName, e) {
        
        console.log(e)
        // 触摸开始
        let touchTarget = e.targetTouches[0];
        // 记录触摸点的坐标（初始位置）
        this.touch.initialPosition = {
            x: touchTarget.clientX,
            y: touchTarget.clientY,
        };
        // 记录需要移动的元素坐标（初始位置）
        this.element.initialPosition = {
            x: this.$refs[refName].offsetLeft,
            y: this.$refs[refName].offsetTop,
        };
        },
        touchmoveHandle(refName, e) {
            console.log(e,'移动时');
        e.preventDefault();
        let touchTarget = e.targetTouches[0];
        // 根据初始touch位置计算移动距离:元素移动位置=元素初始位置+(光标移动后的位置-光标点击时的初始位置)
        let X =
            this.element.initialPosition.x +
            (touchTarget.clientX - this.touch.initialPosition.x);
        let Y =
            this.element.initialPosition.y +
            (touchTarget.clientY - this.touch.initialPosition.y);
        // 限制可移动距离，不超出可视区域
        // let maxWidth = innerWidth + this.$refs[refName].offsetWidth;
        // let maxHeight = innerHeight + this.$refs[refName].offsetHeight;
        // X = X <= 0 ? 0 : X >= maxWidth ? maxWidth : X;
        // Y = Y <= 0 ? 0 : Y >= maxHeight ? maxHeight : Y;
        // console.log(X,Y)

        // 移动元素
        this.$refs[refName].style.left = X + "px";
        this.$refs[refName].style.top = Y + "px";
        },

        // pc端
        mousedownHandle(refName, e){
            // console.log(1,refName,e);
            // 记录触摸点的坐标（初始位置）
            this.touch.initialPosition = {
                x: e.clientX,
                y: e.clientY,
            };
            // 记录需要移动的元素坐标（初始位置）
            this.element.initialPosition = {
                x: this.$refs[refName].offsetLeft,
                y: this.$refs[refName].offsetTop,
            };

            // 移动时
             document.onmousemove = (e)=>{
                 e.preventDefault();
                let X =
                this.element.initialPosition.x +
                (e.clientX - this.touch.initialPosition.x);
                let Y =
                this.element.initialPosition.y +
                (e.clientY - this.touch.initialPosition.y);

                // 移动元素
                this.$refs[refName].style.left = X + "px";
                this.$refs[refName].style.top = Y + "px";
             }
            //  抬起时
            document.onmouseup = () => {
                // console.log(e);
                document.onmousemove = null;
                document.onmouseup = null;
            };

        }
    },
    computed: {
        styleWidth() {
            return `${200 + (this.value * 4) }px`
        },
        styleHeight(){
            return `${150 + (this.value * 3)}px`
        }
    },
    
  }
</script>
<style scoped>
    .sliderBox{
        width: 40px;
        position: relative;
        margin-top: 50px;
    }
  ::v-deep .sliderBox .el-input{
        display: none !important;
    }
  ::v-deep .sliderBox .el-input-number__decrease{
        position: absolute !important;
        top: -26px !important;
        left: -13px !important;
        z-index: 1002 !important;
        width: 26px !important;
        height: 26px !important;
        line-height: 23px !important;
        border: 1px solid #999 !important;
        border-bottom-left-radius: 0px !important;
        border-top-left-radius: 0px !important;
   }
   ::v-deep .sliderBox .el-input-number__increase{
       position: absolute !important;
       top: -271px !important;
       left: -13px !important;
       z-index: 1002 !important;
       width: 26px !important;
       height: 26px !important;
       line-height: 23px !important;
       border: 1px solid #999 !important;
       border-bottom-right-radius: 0px !important;
       border-top-right-radius: 0px !important;
   }
   .bottomBox{
       width: 6px;
       height: 20px;
       background: #fff;
       position: absolute;
       top: 193px;
       left: 16px;
       border-left: 1px solid #999;
       border-right: 1px solid #999;
   }
   .topBox{
       width: 6px;
       height: 20px;
       background-color: #409EFF;
       position: absolute;
       top: -10px;
       left: 16px;
       border-left: 1px solid #999;
       border-right: 1px solid #999; 
   }
   ::v-deep .el-slider__runway {
       background-color: #409EFF;
       border: 1px solid #999;
   }
   ::v-deep .el-slider__bar {
       background-color: #fff;
   }
   ::v-deep .el-slider__button{
       border-radius: 0;
   }
   ::v-deep .el-slider__button{

   }
   .originInner{
       display: block;
       width: 12px;
       height: 12px;
       border-radius: 50%;
       background: #999;
   }
   .origin{
       width: 24px;
       height: 24px;
       border: 1px solid #999;
       display: flex;
       justify-content: center;
       align-items: center;
       position: absolute;
       top: -65px;
       left: 7px;
   }
   .origin:hover .originInner{
       background: #409EFF;
   }

   /* 表格的样式 */
   /* td {
  width: 100px;
  height: 50px;
} */
.tableBox{
    width: 400px;
    height: 300px;
    padding: 10px;
    background: lightblue;
    overflow: hidden;
    position: relative;
}
.table{
    margin: 0 auto;
}
#mainBox{
    display: flex;
}
.tableSmallBox{
    background: lightgreen;
    position: absolute;
    z-index: 2;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    cursor: move;
}
</style>